<template>
  <div class="video-processor">
    <!-- 文件选择 -->
    <input 
      type="file" 
      accept="video/*" 
      @change="onFileSelected"
      class="file-input"
    >
    
    <!-- 处理状态 -->
    <div v-if="status" class="status">{{ status }}</div>
    
    <!-- 处理按钮 -->
    <button 
      @click="processVideo" 
      :disabled="!selectedFile || isProcessing"
      class="process-btn"
    >
      {{ isProcessing ? '处理中...' : '开始处理视频' }}
    </button>
    
    <!-- 预览区域 -->
    <div v-if="outputUrl" class="preview">
      <h3>处理后预览</h3>
      <video :src="outputUrl" controls width="600"></video>
      <a :href="outputUrl" download="processed-video.mp4" class="download-btn">
        下载视频
      </a>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';


// 状态管理
const selectedFile = ref(null); // 选中的视频文件
const isProcessing = ref(false); // 是否正在处理
const status = ref(''); // 处理状态提示
const outputUrl = ref(''); // 处理后视频的 URL

// 初始化 FFmpeg 实例
const ffmpeg = createFFmpeg({
  log: true,
  corePath: 'https://unpkg.com/@ffmpeg/core@0.11.0/dist/ffmpeg-core.js'
});

// 选择文件
const onFileSelected = (e) => {
  const file = e.target.files[0];
  if (file) {
    selectedFile.value = file;
    status.value = `已选择文件: ${file.name}`;
    outputUrl.value = ''; // 重置预览
  }
};

// 处理视频核心逻辑
const processVideo = async () => {
  if (!selectedFile.value) return;

  isProcessing.value = true;
  status.value = '正在加载 FFmpeg 核心库...';

  try {
    // 1. 加载 FFmpeg 核心（首次加载约 20-30MB，后续会缓存）
    if (!ffmpeg.isLoaded()) {
      await ffmpeg.load();
    }

    // 2. 将选中的文件写入 FFmpeg 虚拟文件系统
    status.value = '正在读取视频文件...';
    const inputFileName = 'input-video'; // 虚拟文件系统中的文件名
    await ffmpeg.FS('writeFile', inputFileName, await fetchFile(selectedFile.value));

    // 3. 执行 FFmpeg 命令（核心处理步骤）
    status.value = '正在处理视频（转换格式 + 调整分辨率）...';
    const outputFileName = 'output-video.mp4'; // 输出文件名
    await ffmpeg.run(
      '-i', inputFileName, // 输入文件（虚拟文件系统中的路径）
      '-s', '1280x720',   // 分辨率调整为 720p（16:9）
      '-c:v', 'libx264',  // 视频编码器（MP4 常用 H.264）
      '-c:a', 'aac',      // 音频编码器（MP4 常用 AAC）
      '-strict', 'experimental', // 兼容部分编码器
      outputFileName      // 输出文件
    );

    // 4. 从虚拟文件系统读取处理后的文件
    status.value = '处理完成，准备预览...';
    const processedFile = ffmpeg.FS('readFile', outputFileName);

    // 5. 生成可预览/下载的 URL
    outputUrl.value = URL.createObjectURL(
      new Blob([processedFile.buffer], { type: 'video/mp4' })
    );

    status.value = '处理成功！';
  } catch (error) {
    status.value = `处理失败: ${error.message}`;
    console.error('FFmpeg 处理错误:', error);
  } finally {
    isProcessing.value = false;
    // 清理虚拟文件系统（可选，释放内存）
    ffmpeg.FS('unlink', 'input-video');
    ffmpeg.FS('unlink', 'output-video.mp4');
  }
};
</script>

<style scoped>
.video-processor {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}
.file-input {
  margin-bottom: 15px;
}
.status {
  color: #666;
  margin: 10px 0;
  padding: 8px;
  background: #f5f5f5;
}
.process-btn {
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.process-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.preview {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #eee;
}
.download-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background: #2c3e50;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}
</style>